<!DOCTYPE html>
<html lang="zh-cn" style="font-size:16px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width , user-scalable=no ,  initial-scale=1.0  , maximum-scale=1.0 , minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>附近的门店列表</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nearbyShop.css">
	 <!-- 微信js-sdk -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=3CPBZ-HHKC6-VEXSS-EOP3C-XHLV6-EGBB7&libraries=place"></script>
    <script src="../js/clipboard.min.js"></script>
    <script>
        (function (doc, win) {
        var docEl = win.document.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        /**
            * ================================================
            *   设置根元素font-size
            * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 
            × ================================================
            */
        var refreshRem = function () {
            var clientWidth = win.innerWidth
                            || doc.documentElement.clientWidth
                            || doc.body.clientWidth;
        
            console.log(clientWidth)
            if (!clientWidth) return;
            var fz;
            var width = clientWidth;
            fz = 16 * width / 375;
            docEl.style.fontSize = fz + 'px';
        };
        
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, refreshRem, false);
        doc.addEventListener('DOMContentLoaded', refreshRem, false);
        refreshRem();
        
        })(document, window);
    </script>
</head>
<body>
    <div id="app">
        <section class="nearbyContent">
            <div class="mapPart" >
                <div id="mapContainer"></div>
                <section class="searchInput">
                    <span class="dingweiImg">
                            <img src="../img/dingwei.png"  />
                    </span>
                    <input  v-model="searchValue" id="searchInput" />
                    <span class="searchImg" @click="toSearch">
                            <img src="../img/poiSearch.png"  />
                    </span>
                </section>
            </div>
            <div class="nearbyShopPart">
                <section class="nearbyShopPart-list displayBetween" v-for="(list,index) in shopList" :key="index" @click="gotowhere(list)">
                    <div class="imgBox" >
                        <img :src="list.fBusinessImage" />
                    </div>
                    <div class="nearbyShop-des">
                        <section class="nearbyShop-des-head displayBetween" >
                             <h3 class="ellipsis1">{{list.fBusinessName}}</h3>  
                             <div>
                                <img src="../img/callPhone.png" @click.stop="openBox(list)" />
                                <span></span>
                                <img src="../img/daohang.png" @click.stop="openLocation" />
                             </div> 
                        </section>
                        <p class="ellipsis1">{{list.fBusinessAddress}}</p>
                        <p class="ellipsis1">{{list.fBusinessTelephone}}</p>
                    </div>
                </section>
                <img src="../img/noShopList.png"  class="noShopList" v-show="shopList.length==0" />
            </div>
        </section>

        <section class="BoxMask" @click.self="closeBox" v-show="isShowBox">
               <div class="centerBox">
                   <p @click="closeBox"><a :href="'tel:'+telPhone">呼叫</a></p>
                   <!-- <p @click="copyTel">复制 <input v-model='telPhone' type="text" id="telPhoneInput" style="opacity:0" /> </p> -->
                   <!-- <i id="telPhoneInput">{{telPhone}}</i> -->
                   <button @click="copyTel" class="copyBtn" data-clipboard-target="#telPhoneInput"  data-clipboard-action="copy" style="display:inline-block;line-height: 3rem;background:#fff;outline:none;border:none;padding-left: 1.25rem;
                   color: #333333;width: 100%;text-align: left;">复制  </button>
                   <input :value='telPhone' type="text" id="telPhoneInput" style="opacity:0" />
                   <!-- <p @click="addTXL"><a :href="'wtai://wp/ap;'+telPhone+';'">添加到手机通讯录</a></p> -->
                   
                
               </div>
        </section>
    </div>
</body>
<script>
    var wxPermissionList = [
                'openLocation',
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone',
                'chooseImage',
            ];
    new Vue({
        el: '#app',
        data: {
            isShowBox:false,
            shopList: [
                {fMediaUrl: 'www.aaaw',fBusinessName: '商户名称1',fBusinessTelephone:'1234567897',fBusinessImage:'../img/POIdialog.png',fBusinessAddress:'商户地址',fBusinessLongitude:'123',fBusinessLatitude:'1234'},
                {fMediaUrl: 'www.aaaw',fBusinessName: '商户名称',fBusinessTelephone:'1234567898',fBusinessImage:'../img/POIdialog.png',fBusinessAddress:'商户地址',fBusinessLongitude:'123',fBusinessLatitude:'1234'},
                {fMediaUrl: 'www.aaaw',fBusinessName: '商户名称',fBusinessTelephone:'1234567899',fBusinessImage:'../img/POIdialog.png',fBusinessAddress:'商户地址',fBusinessLongitude:'123',fBusinessLatitude:'1234'},
                {fMediaUrl: 'www.aaaw',fBusinessName: '商户名称',fBusinessTelephone:'1234567897',fBusinessImage:'../img/POIdialog.png',fBusinessAddress:'商户地址',fBusinessLongitude:'123',fBusinessLatitude:'1234'},
                {fMediaUrl: 'www.aaaw',fBusinessName: '商户名称',fBusinessTelephone:'1234567897',fBusinessImage:'../img/POIdialog.png',fBusinessAddress:'商户地址',fBusinessLongitude:'123',fBusinessLatitude:'1234'},
                {fMediaUrl: 'www.aaaw',fBusinessName: '商户名称',fBusinessTelephone:'1234567897',fBusinessImage:'../img/POIdialog.png',fBusinessAddress:'商户地址',fBusinessLongitude:'123',fBusinessLatitude:'1234'},
            ],
            searchValue:null,
            geocoder:null,
			mapInfoItem:{
				lat:'30.88578',
				lon:'121.350731',
				mapAddress:'上海市金山区上海新帑实业有限公司',
			},
            wxParams:null,
            telPhone:'',//拨打的电话号码
        },
        created: function(){
            
        },
        mounted: function(){
            this.init();
            this.initWx();
        },
        methods: {
            initWx:function(){
                let that = this;
                $.ajax({
                    url:'http://www.pre-zuma.com/authority-sitebackend/userPermission/getWxShareData',
                    data:{shareurl:window.location.href.split('#')[0]},
                    success: function(res){
                        console.log(res,'res')
                        that.wxParams = res || {};
                        wx.config({
                                    debug: true,
                                    appId: that.wxParams.wxuser,
                                    timestamp: that.wxParams.timestamp,
                                    nonceStr: that.wxParams.noncestr,
                                    signature: that.wxParams.signature,
                                    jsApiList: wxPermissionList,
                        });
                    },
                    error: function(){
                        console.log('失败')
                    }
                })
            },
			openLocation:function(){
                console.log(wx)
				let _this = this;
				let mapInfoItem = _this.mapInfoItem;
				wx.ready(function () {
                    //alert(2)
                     wx.openLocation({
						 latitude: mapInfoItem.lat, // 纬度，浮点数，范围为90 ~ -90
						 longitude: mapInfoItem.lon, // 经度，浮点数，范围为180 ~ -180。
						 name: mapInfoItem.mapAddress, // 位置名
						 address: mapInfoItem.mapAddress, // 地址详情说明
						 scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
						 infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
						 fail: function (err) {
									    console.log('shibai',err)
									  }
						    });
                      });
               
                wx.error(function () {
                          console.log('shibai2222222222')  
                })
            },
            openBox:function(list){
                this.telPhone = list.fBusinessTelephone
                this.isShowBox = true
            },
            closeBox:function(){
                this.isShowBox = false
            },
            copyTel:function(){
                // var input = $('#telPhoneInput');
                // input.select();
                // document.execCommand("Copy");
                
                var clipboard = new ClipboardJS('.copyBtn');
                var that = this;
                clipboard.on('success', function(e) {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);
                    e.clearSelection();
                    clipboard.destroy();
                    that.isShowBox = false
                });

                clipboard.on('error', function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
                that.isShowBox = false
                });
            },
            addTXL:function(){
                this.isShowBox = false
            },
            gotowhere:function(list){
                if(list.fMediaUrl){
                    window.location.href = list.fMediaUrl
                }else{//如果关联了素材 点击跳到素材 没有跳到定位
                    this.openLocation()
                }
            },
            toSearch:function(){
                this.geocoder.getLocation(this.searchValue);
            },
            init: function(){
                var myLatlng = new qq.maps.LatLng(31.23037, 121.4737);
                var myOptions = {
                    zoom: 17,//缩放比例4-17
                    center: myLatlng,
                    zoomControl: false,//关闭缩放控件
                    //设置控件的地图类型和位置
                    mapTypeControlOptions: {
                    //设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，HYBRID显示卫星图像上的主要街道透明层
                    mapTypeIds: [
                        // qq.maps.MapTypeId.ROADMAP,
                        // qq.maps.MapTypeId.SATELLITE,
                        //qq.maps.MapTypeId.HYBRID
                    ],
                    //设置控件位置相对上方中间位置对齐
                    position: qq.maps.ControlPosition.TOP_CENTER
                }
                }

                var map = new qq.maps.Map(document.getElementById("mapContainer"), myOptions);
                var marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                 //设置Marker的动画属性为从落下
                marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
                // 设置文本标记
                // var label = new qq.maps.Label({
                //     position: myLatlng,
                //     map: map,
                //     content:'文本标注'
                // });
                // label.setStyle({color:"#000000",backgroundColor:"red"})
                //实例化自动完成
                var ap = new qq.maps.place.Autocomplete(document.getElementById('searchInput'), {
                    offset: new qq.maps.Size(0, 5),
                    location: '上海市'
                });
                var geocoder=null;
                //地址和经纬度之间进行转换服务
                geocoder = new qq.maps.Geocoder();
                //设置服务请求成功的回调函数
                geocoder.setComplete(function(result) {
                    console.log(result);
                    map.setCenter(result.detail.location);
                    var marker = new qq.maps.Marker({
                        map: map,
                        position: result.detail.location
                    });
                    //点击Marker会弹出反查结果
                    qq.maps.event.addListener(marker, 'click', function() {
                        alert("坐标地址为： " + result.detail.location);
                    });
                });
                 //若服务请求失败，则运行以下函数
                geocoder.setError(function() {
                     alert("出错了，请输入正确的地址！！！");
                });
                this.geocoder = geocoder

            },
        },
       
    })
</script>
</html>